import React, { PureComponent } from 'react';
import './index.less';

class PanShare extends PureComponent {

  state = {
    activeIndex: 1
  }

  toggleActiveIndex = (index) => {
    this.setState({
      activeIndex: index
    })
  }

  render () {
    const { activeIndex } = this.state
    return (
      <>
        <ul className="left_sub_share_items">
          <li className="left_sub_share_item" onClick={() => this.toggleActiveIndex(1)}>
            <a className={activeIndex === 1? 'active': ''}>
              分享记录
            </a>
          </li>
          <span />
          <li className="left_sub_share_item" onClick={() => this.toggleActiveIndex(2)}>
            <a className={activeIndex === 2? 'active': ''}>
              好友消息
            </a>
          </li>
          <span />
          <li className="left_sub_share_item" onClick={() => this.toggleActiveIndex(3)}>
            <a className={activeIndex === 3? 'active': ''}>
              收集文件
            </a>
          </li>
        </ul>
      </>
    );
  }
}

export default PanShare;
